<script setup>
import { h, onMounted, ref } from 'vue';
import { NButton, NDataTable, NInput, NLayout, NLayoutContent, NPagination, NSpace } from 'naive-ui';

// 表格列定义
const columns = [
  { title: 'ID', key: 'id', width: 100 },
  { title: '案件编号', key: 'case_id', width: 150 },
  { title: '受理时间', key: 'accept_time', width: 150 },
  { title: '问题描述', key: 'problem', width: 200 },
  { title: '提供者', key: 'provider_name', width: 150 },
  {
    title: '处置方式',
    key: 'processing',
    width: 150,
    render: row => row.processing.full_name
  },
  {
    title: '查办主体',
    key: 'processing_subject',
    width: 150,
    render: row => row.processing_subject.full_name
  },
  {
    title: '查办状态',
    key: 'processing_status',
    width: 150,
    render: row => row.processing_status.full_name
  },
  {
    title: '人员类别',
    key: 'personnel_category',
    width: 150,
    render: row => row.personnel_category.full_name
  },
  {
    title: '问题线索类型',
    key: 'question_type',
    align: 'center',
    width: 150,
    children: [
      {
        title: '行业领域',
        key: 'industry',
        align: 'center',
        width: 300,
        children: [
          { title: '油料', key: '00010001', align: 'center', width: 100 },
          { title: '工程', key: '00010002', align: 'center', width: 100 },
          { title: '采购', key: '00010003', align: 'center', width: 100 },
          { title: '装备科技', key: '00010004', align: 'center', width: 100 },
          { title: '套现', key: '00010005', align: 'center', width: 100 },
          { title: '医疗卫生', key: '00010006', align: 'center', width: 100 },
          { title: '其他', key: '00010007', align: 'center', width: 100 }
        ]
      },
      {
        title: '基层风气',
        key: 'grassroots_style',
        align: 'center',
        width: 300,
        children: [
          { title: '选人用人', key: '00020001', align: 'center', width: 100 },
          { title: '军士选晋', key: '00020002', align: 'center', width: 100 },
          { title: '待遇落实', key: '00020003', align: 'center', width: 100 },
          { title: '入党考学', key: '00020004', align: 'center', width: 100 },
          { title: '打骂体罚', key: '00020005', align: 'center', width: 100 },
          { title: '侵占利益', key: '00020006', align: 'center', width: 100 },
          { title: '五多问题', key: '00020007', align: 'center', width: 100 }
        ]
      },
      // 动态生成 question_type 列
      ...generateQuestionTypeColumns()
    ]
  },
  {
    title: '操作',
    key: 'actions',
    width: 150,
    render: row => [
      h(
        NButton,
        {
          size: 'small',
          onClick: () => handleEdit(row)
        },
        { default: () => '编辑' }
      ),
      h(
        NButton,
        {
          size: 'small',
          style: 'margin-left: 10px;',
          onClick: () => handleDelete(row)
        },
        { default: () => '删除' }
      )
    ]
  }
];

// 动态生成 question_type 列的函数
function generateQuestionTypeColumns() {
  const questionTypes = [
    { title: '领导干部落实待遇', key: '0003', width: 150 },
    { title: '训风演风', key: '0004', width: 150 },
    { title: '酒', key: '0005', width: 150 },
    { title: '不正当交往', key: '0006', width: 150 }
  ];

  return questionTypes.map(type => ({
    title: type.title,
    key: type.key,
    width: type.width,
    render: row => {
      const hasType = row.question_type.some(item => item.fir_category_id === type.key);
      return hasType ? '1' : '';
    }
  }));
}

// 数据状态
const data = ref([]); // 原始数据
const filteredData = ref([]); // 过滤后的数据
const loading = ref(false); // 加载状态
const searchKeyword = ref(''); // 搜索关键字

// 分页状态
const pagination = ref({
  page: 1,
  pageSize: 10,
  pageCount: 0
});

// 获取数据
async function fetchData() {
  loading.value = true;
  try {
    const response = await fetch('http://localhost:8000/api/disciplineDetail/');
    const result = await response.json();
    data.value = result.results; // 获取 results 数据
    filteredData.value = result.results; // 初始化过滤数据
    pagination.value.pageCount = Math.ceil(result.count / pagination.value.pageSize); // 计算总页数
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    loading.value = false;
  }
}

// 搜索功能
function handleSearch() {
  const keyword = searchKeyword.value.toLowerCase();
  filteredData.value = data.value.filter(item => {
    return (
      item.case_id.toLowerCase().includes(keyword) ||
      item.provider_name.toLowerCase().includes(keyword) ||
      item.problem.toLowerCase().includes(keyword)
    );
  });
  pagination.value.page = 1; // 重置分页
  pagination.value.pageCount = Math.ceil(filteredData.value.length / pagination.value.pageSize);
}

// 分页功能
function handlePageChange(page) {
  pagination.value.page = page;
}

function handlePageSizeChange(pageSize) {
  pagination.value.pageSize = pageSize;
  pagination.value.page = 1;
  pagination.value.pageCount = Math.ceil(filteredData.value.length / pageSize);
}

// 初始化时获取数据
onMounted(() => {
  fetchData();
});
</script>

<template>
  <NLayout>
    <NLayoutContent>
      <NSpace vertical>
        <!-- 搜索框 -->
        <NInput v-model:value="searchKeyword" placeholder="请输入关键字搜索" clearable @input="handleSearch" />

        <!-- 数据表格 -->
        <NDataTable :columns="columns" :data="filteredData" :pagination="pagination" :loading="loading" bordered />

        <!-- 分页 -->
        <NPagination
          v-model:page="pagination.page"
          :page-count="pagination.pageCount"
          :page-size="pagination.pageSize"
          show-size-picker
          :page-sizes="[10, 20, 30, 40]"
          @update:page="handlePageChange"
          @update:page-size="handlePageSizeChange"
        />
      </NSpace>
    </NLayoutContent>
  </NLayout>
</template>
